import React, { useState } from 'react';

import moment from 'moment';


// 示例圆形图片的 URL
const generateImages = () => {
  const images = [];
  for (let i = 0; i < 100; i++) {
    images.push(`https://via.placeholder.com/60?text=${i + 1}`); // 这里使用占位图
  }
  return images;
};

const SearchExpand: React.FC = () => {
  // 静态初始数据 mock
  const initialItems = [
    {
      groupId: 1,
      title: '项目 1',
      expanded: true,
      images: [
        { id: 1, name: "n11", src: 'https://via.placeholder.com/150', selected: false },
        { id: 2, name: "n12", src: 'https://via.placeholder.com/150', selected: false },
        { id: 3, name: "n13", src: 'https://via.placeholder.com/150', selected: false }
      ]
    },
    {
      groupId: 2,
      title: '项目 2',
      expanded: true,
      images: [
        { id: 4, name: "n21", src: 'https://via.placeholder.com/150', selected: false },
        { id: 5, name: "n22", src: 'https://via.placeholder.com/150', selected: false },
        { id: 6, name: "n23", src: 'https://via.placeholder.com/150', selected: false }
      ]
    },
    {
      groupId: 3,
      title: '项目 3',
      expanded: false,
      images: [
        { id: 7, name: "n31", src: 'https://via.placeholder.com/150', selected: false },
        { id: 8, name: "n32", src: 'https://via.placeholder.com/150', selected: false },
        { id: 9, name: "n33", src: 'https://via.placeholder.com/150', selected: false }
      ]
    },
  ];
  // 列表项数据
  const [items, setItems] = useState(initialItems);

  // 点击图片 判断边框
  const [selectedImage, setSelectedImage] = useState(null);
  // 搜索的文字
  const [query, setQuery] = useState('');

  // 输入框更改时，更改搜索文案
  const handleInputChange = (event: any) => {
    setQuery(event.target.value);
  };

  // 搜索事件
  const handleSearch = () => {
    if (query === '') {
      setItems(initialItems);
    } else {
      console.log(...items)
      const filteredItems = initialItems.map(item => ({
        ...item,
        images: item.images.filter(image =>
          image.name.toLowerCase().includes(query.toLowerCase())
        ),
      })).filter(item => item.images.length > 0);
      setItems(filteredItems);
    }
    // 在这里可以添加搜索逻辑，例如调用 API

  };
  
  // 选择一张图片样式变化
  const handleImageClick = (index: any) => {
    setSelectedImage(index);
  };

  // 展开收缩样式变化
  const handleToggle = (groupId: any) => {
    setItems((prevItems) =>
      prevItems.map((item) =>
        item.groupId === groupId ? { ...item, expanded: !item.expanded } : item
      )
    );
  };

  return (
    <div style={{ width: '300px', background: 'white', color: 'black' }}>
      <div style={{ display: 'flex', alignItems: 'center', margin: '20px' }}>
        <input
          type="text"
          value={query}
          onChange={handleInputChange}
          placeholder="请输入搜索内容"
          style={{ padding: '10px', color: 'black', flexGrow: 1, marginRight: '10px' }}
        />
        <button onClick={handleSearch} style={{ padding: '10px' }}>
          搜索
        </button>
      </div>

      <div style={{ margin: '20px' }}>

        {items.map((item, index) => (
          <div key={index} style={{ marginBottom: '10px' }}>
            <div
              onClick={() => handleToggle(item.groupId)}
              style={{
                padding: '10px',

                cursor: 'pointer',

                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
              }}
            >
              <span>{item.title}</span>
              <span>
                {item.expanded === true ? '▲' : '▼'}
              </span>
            </div>
            {item.expanded === true && (
              <div
                style={{
                  flexDirection: 'row', // 横向排列
                  overflowX: 'auto', // 横向滚动
                  padding: '10px',
                  backgroundColor: '#e0e0e0',
                  border: '1px solid #ccc',
                  borderRadius: '4px',
                  height: 'auto',
                  overflow: 'hidden',
                  transition: 'height 0.3s ease',
                }}
              >
                {items[index].images.map((image, i) => (
                  <div
                    key={i}
                    onClick={() => handleImageClick(image.id)}
                    style={{
                      float: 'left',
                      width: '30px',
                      margin: 2,
                      height: '30px',
                      // padding: '2px',
                      borderRadius: '8px',
                      overflow: 'hidden',
                      cursor: 'pointer',
                      border: selectedImage === image.id ? '2px solid blue' : 'none',
                      transition: 'border 0.3s ease',
                    }}
                  >
                    <img
                      src={image.src}
                      alt={`圆形图片 ${i + 1}`}
                      style={{
                        width: '100%', borderRadius: '50%',
                        overflow: 'hidden', height: '100%', objectFit: 'cover'
                      }}
                    />
                  </div>
                ))}
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
};

export default SearchExpand;